<template>
	<v-chart class="chart" :option="option" autoresize />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { use } from 'echarts/core'
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { RadarChart } from 'echarts/charts'
import {
	TitleComponent,
	TooltipComponent,
	LegendComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'

import api from '@/api/statistics'

const option = ref(null)

onMounted(() => {
	getActivity()
})

const getActivity = async () => {
	const result = await api.getActivity()
	if (result.code === 200) {
		const indicator = result.data.map(item => ({ text: item.label, max: 35 }))
		const value = result.data.map(item => item.value)
		option.value = {
			color: ['#ff9008'],
			legend: {},
			radar: [
				{
					indicator: indicator,
					center: ['50%', '50%'],
					shape: 'circle',
					radius: '60%',
					axisName: {
						color: '#fff',
						backgroundColor: '#666',
						borderRadius: 3,
						padding: [3, 5]
					}
				}
			],
			series: [
				{
					type: 'radar',
					data: [
						{
							value: value,
							areaStyle: {
								color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
									{
										color: 'rgba(255, 145, 124, 0.1)',
										offset: 0
									},
									{
										color: '#ff9008',
										offset: 1
									}
								])
							}
						}
					]
				}
			]
		}
		use([
			CanvasRenderer,
			RadarChart,
			TitleComponent,
			TooltipComponent,
			LegendComponent,
		])
	} else {
		ElMessage.error(result.msg)
	}
}
</script>

<style scoped>
.chart {
	height: 100%;
}
</style>